<template>
  <div v-if="detailAuth">
    <page-header :title="$t('m.Oders_Details')"></page-header>
    <div class="detail_div container">
      <div class="detail_left">
        <div class="detail_left_div">
          <div class="detail_title">
            <div style=" display: flex;align-items: center;">
              <span style="font-size: 16px;">{{
                $t('m.Order_List_Orderinfo')
              }}</span>
              <div
                class="detail_state"
                :style="details.state | valFormat(stateOption1, 1)"
              >
                <span
                  class="detail_state_dot"
                  :style="details.state | valFormat(stateOption2, 1)"
                ></span>
                <span class="detail_state_text">{{
                  details.state | valFormat(stateOption1)
                }}</span>
              </div>
            </div>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Order_List_OrderID') }}: </span>
            <span class="detail_text2">{{ details.orderNo | strFormat }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.User_ID') }}: </span>
            <span class="detail_text2">{{ details.ucode | strFormat }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Order_source') }}: </span>
            <span class="detail_text2">{{
              details.source | stateFormat(sourceOption) | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Order_List_Powerbank') }}: </span>
            <span class="detail_text2">{{ details.pbNo | strFormat }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Order_date') }}: </span>
            <span class="detail_text2">
              {{ details.createTime | dateformat }} ~
              {{ details.endTime | dateformat }}</span
            >
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Order_List_Duration') }}: </span>
            <span class="detail_text2">{{
              details.useDuration | formatSeconds | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Order_amount') }}: </span>
            <span class="detail_text2">{{
              details.orderAmount | amountFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Actual_amount_paid') }}: </span>
            <span class="detail_text2">{{
              details.realAmount | amountFormat
            }}</span>
          </div>
          <div class="detail_text">
            <div>
              {{ $t('m.settingPricePlan') }}:
              <span class="detail_text2" v-if="details.billing">
                <span v-show="details.billing.freeDuration">{{
                  $t('m.billingRules1')
                    .replace(
                      '$order',
                      details.billing.freeDurationApplyOrderNum == '' ||
                        details.billing.freeDurationApplyOrderNum == null
                        ? $t('m.Every_order').toLowerCase()
                        : $t(
                            'm.' +
                              `First_order${details.billing.freeDurationApplyOrderNum}`
                          ).toLowerCase()
                    )
                    .replace('$freeDuration', details.billing.freeDuration)
                    .replace(
                      '$times1',
                      details.billing.freeDurationControlType == 1
                        ? details.billing.freeDuration > 1
                          ? $t('m.minute3')
                          : $t('m.minute2')
                        : details.billing.freeDurationControlType == 2
                        ? details.billing.freeDuration > 1
                          ? $t('m.hour4')
                          : $t('m.hour3')
                        : details.billing.freeDuration > 1
                        ? $t('m.days')
                        : $t('m.day')
                    )
                }}</span>
                <span>{{
                  $t('m.billingRules2')
                    .replace(
                      '$thereafter',
                      details.billing.freeDuration ? $t('m.thereafter') : ''
                    )
                    .replace('$currency', '')
                    .replace(
                      '$amount',
                      $format.amountFormat(details.billing.amount)
                    )
                    .replace(
                      '$cycle',
                      $format.numberFormat(details.billing.cycle)
                    )
                    .replace(
                      '$times2',
                      details.billing.controlType == 1
                        ? details.billing.cycle > 1
                          ? $t('m.minute3')
                          : $t('m.minute2')
                        : details.billing.controlType == 2
                        ? details.billing.cycle > 1
                          ? $t('m.hour4')
                          : $t('m.hour3')
                        : details.billing.cycle > 1
                        ? $t('m.days')
                        : $t('m.day')
                    )
                    .replace(
                      '$punctuation',
                      details.billing.dayAmount
                        ? $t('m.punctuation1')
                        : $t('m.punctuation2')
                    )
                }}</span>
                <span v-show="details.billing.dayAmount">{{
                  $t('m.billingRules3')
                    .replace('$currency', '')
                    .replace(
                      '$dayAmount',
                      $format.amountFormat(details.billing.dayAmount)
                    )
                }}</span>
                <span v-show="details.billing.amount">{{
                  $t('m.billingRules4')
                    .replace('$currency', '')
                    .replace(
                      '$penaltyAmount',
                      $format.amountFormat($cache.get('xt')['penalty-amount'])
                    )
                    .replace(
                      '$maxRentDuration',
                      $format.numberFormat(details.billing.maxRentDuration)
                    )
                    .replace(
                      '$times3',
                      details.billing.maxDurationControlType == 1
                        ? details.billing.maxRentDuration > 1
                          ? $t('m.minute3')
                          : $t('m.minute2')
                        : details.billing.maxDurationControlType == 2
                        ? details.billing.maxRentDuration > 1
                          ? $t('m.hour4')
                          : $t('m.hour3')
                        : details.billing.maxRentDuration > 1
                        ? $t('m.days')
                        : $t('m.day')
                    )
                }}</span>
              </span>
              <span v-else>--</span>
            </div>
          </div>
        </div>
        <div class="detail_left_div">
          <div class="detail_title">{{ $t('m.Branchs_Stations') }}</div>
          <div
            class="detail_div"
            style="margin-top: 0px; width: initial !important;"
          >
            <div class="detail_left">
              <div class="detail_text">
                <span>{{ $t('m.Rent_from') }}: </span>
                <span class="detail_text2">{{
                  details.rentBranchName | strFormat
                }}</span>
              </div>
              <div class="detail_text">
                <span>{{ $t('m.branch_Address') }}: </span>
                <span class="detail_text2">{{
                  details.rentAddress | strFormat
                }}</span>
              </div>
              <div class="detail_text">
                <span>{{ $t('m.Station_ID_form') }}: </span>
                <span class="detail_text2">{{
                  details.rentCabinetNo | strFormat
                }}</span>
              </div>
              <div class="detail_text">
                <span>{{ $t('m.Order_slotNoNum') }}: </span>
                <span class="detail_text2">{{
                  details.rentPos | strFormat
                }}</span>
              </div>
              <div class="detail_text">
                <span>{{ $t('m.Order_Battery_LevelR') }}: </span>
                <span class="detail_text2"
                  >{{ details.rentPbBc | strFormat
                  }}{{ details.rentPbBc ? '%' : '' }}</span
                >
              </div>
            </div>
            <div class="detail_right">
              <div class="detail_text">
                <span>{{ $t('m.Return_to') }}: </span>
                <span class="detail_text2">{{
                  details.returnBranchName | strFormat
                }}</span>
              </div>
              <div class="detail_text">
                <span>{{ $t('m.branch_Address') }}: </span>
                <span class="detail_text2">{{
                  details.returnAddress | strFormat
                }}</span>
              </div>
              <div class="detail_text">
                <span>{{ $t('m.Station_ID_to') }}: </span>
                <span class="detail_text2">{{
                  details.returnCabinetNo | strFormat
                }}</span>
              </div>
              <div class="detail_text">
                <span>{{ $t('m.Order_slotNoNum') }}: </span>
                <span class="detail_text2">{{
                  details.returnPos | strFormat
                }}</span>
              </div>
              <div class="detail_text">
                <span>{{ $t('m.Order_Battery_LevelR') }}: </span>
                <span class="detail_text2"
                  >{{ details.returnPbBc | strFormat
                  }}{{ details.returnPbBc ? '%' : '' }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="detail_left_div">
          <div class="detail_title">{{ $t('m.Order_Profit_allocation') }}</div>
          <div class="detail_text">
            <span>{{ $t('m.Order_Revenue') }}: </span>
            <span class="detail_text2">{{
              details.shareDTO.dividendAmount | amountFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.platformProfit') }}: </span>
            <span class="detail_text2">{{
              details.shareDTO.platformAmount | amountFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Franchisee_profit') }}: </span>
            <span class="detail_text2">{{
              details.shareDTO.agentAmount | amountFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Merchant_profit') }}: </span>
            <span class="detail_text2">{{
              details.shareDTO.branchAmount | amountFormat
            }}</span>
          </div>
        </div>
      </div>
      <div class="detail_right">
        <div class="detail_left_div">
          <div class="detail_title">
            <div style=" display: flex;align-items: center;">
              <span style="font-size: 16px;">{{
                $t('m.Payment_details')
              }}</span>
              <div
                class="detail_state"
                :style="details.paymentState | valFormat(payOption1, 1)"
              >
                <span
                  class="detail_state_dot"
                  :style="details.paymentState | valFormat(payOption2, 1)"
                ></span>
                <span class="detail_state_text">{{
                  details.paymentState | valFormat(payOption1)
                }}</span>
              </div>
            </div>
            <div
              class="detail_text"
              style=" padding-bottom: 0px;text-align:right"
              v-show="details.paymentState == 1"
            >
              <span>{{ $t('m.Payment_completed') }}: </span>
              <span class="detail_text2">{{
                details.paymentTime | dateformat
              }}</span>
            </div>
          </div>

          <div class="detail_text" v-if="details.couponAmount > 0">
            <span>{{ $t('m.Coupon') }}: </span>
            <span class="detail_text2">{{
              details.couponAmount | amountFormat
            }}</span>
          </div>
          <div class="detail_text" v-if="details.promoCodeAmount > 0">
            <span>{{ $t('m.promo_code') }}: </span>
            <span class="detail_text2">{{
              details.promoCodeAmount | amountFormat
            }}</span>
          </div>

          <div class="detail_text" v-show="details.plateCouponAmount > 0">
            <span>{{ $t('m.Platform_discount') }}: </span>
            <span class="detail_text2">{{
              details.plateCouponAmount | amountFormat
            }}</span>
          </div>

          <div class="detail_text" v-if="details.transferList.length != 0">
            <span>{{ $t('m.settingPaymentMethod') }}: </span>
            <span class="detail_text2">{{
              details.transferList[0].paymentMethod
                | stateFormat(optionsPaymentMethod)
            }}</span>
          </div>

          <div
            class="detail_text"
            v-for="(item, index) in details.transferList"
            :key="index"
          >
            <span>{{ item.type | stateFormat(transferOption) }}: </span>
            <span class="detail_text2"
              >{{ item.amount | amountFormat }}（{{
                $t('m.settingThe3rdPartTransactionNumber')
              }}: {{ item.transactionId | strFormat }}）</span
            >
          </div>
          <div
            class="detail_text"
            v-show="
              details.transferList.length == 0 &&
                !details.plateCouponAmount &&
                !details.userPromoCode &&
                !details.userCoupon
            "
          >
            --
          </div>
        </div>
        <div class="detail_left_div">
          <div class="detail_title">{{ $t('m.Order_Timeline') }}</div>
          <el-timeline>
            <el-timeline-item v-for="(item, index) in record" :key="index">
              <div>
                {{ item.type | stateFormat(typeOption) }}
                <span
                  v-if="
                    (item.type == 3 ||
                      item.type == 10 ||
                      item.type == 11 ||
                      item.type == 17) &&
                      item.operatingContent > 0
                  "
                  style="margin-left:20px"
                  >{{ $t('m.Amount_paid')
                  }}{{ item.operatingContent | amountFormat }}</span
                ><span v-if="item.type == 8" style="margin-left:20px"
                  >{{ $t('m.Payment_amount')
                  }}{{ item.operatingContent | amountFormat }}</span
                ><span v-if="item.type == 9" style="margin-left:20px"
                  >{{ $t('m.Order_refundAmount')
                  }}{{ item.operatingContent | amountFormat }}</span
                ><span v-if="item.type == 4">{{
                  item.operatingContent | amountFormat
                }}</span>
              </div>
              <div>
                <span style="margin-right:20px" v-show="item.operationName">{{
                  item.operationName
                }}</span
                >{{ item.createTime | dateformat }}
              </div>
            </el-timeline-item>
          </el-timeline>
          <div class="detail_text">
            <span v-show="record.length == 0">
              --
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      //支付状态
      payOption1: [
        {
          value: 0,
          label: this.$t('m.Order_Status_Unpaid'),
          color: 'background: #fff7e7;'
        },
        {
          value: 1,
          label: this.$t('m.Payment_Status_Paid'),
          color: 'background: #e6fbee;'
        },
        {
          value: 2,
          label: this.$t('m.Order_freeCharge'),
          color: 'background: #e6fbee;'
        },
        {
          value: 3,
          label: this.$t('m.Payment_Status_Partialrefund'),
          color: 'background: #e6fbee;'
        },
        {
          value: 4,
          label: this.$t('m.Order_Status_Refunded'),
          color: 'background: #e6fbee;'
        }
      ],
      payOption2: [
        {
          value: 0,
          color: 'background: #FFC855;'
        },
        {
          value: 1,
          color: 'background: #4CE48A;'
        },
        {
          value: 2,
          color: 'background: #4CE48A;'
        },
        {
          value: 3,
          color: 'background: #4CE48A;'
        },
        {
          value: 4,
          color: 'background: #4CE48A;'
        }
      ],
      //订单状态
      stateOption1: [
        {
          value: '1',
          color: 'background: #dbf5ff;',
          label: this.$t('m.Order_Status_Renting')
        },
        {
          value: '2',
          color: 'background: #fff7e7;',
          label: this.$t('m.Order_Status_Unpaid')
        },
        {
          value: '3',
          color: 'background: #e6fbee;',
          label: this.$t('m.Order_Status_Completed')
        },
        {
          value: '5',
          color: 'background: #fff7e7;',
          label: this.$t('m.Order_Status_Surveying')
        }
      ],
      stateOption2: [
        {
          value: '1',
          color: 'background: #00B9FF;'
        },
        {
          value: '2',
          color: 'background: #FFC855;'
        },
        {
          value: '3',
          color: 'background: #4CE48A;'
        },
        {
          value: '5',
          color: 'background: #FFC855;'
        }
      ],
      //操作类型
      typeOption: [
        {
          value: 1,
          label: this.$t('m.Rental_order')
        },
        {
          value: 2,
          label: this.$t('m.anordererror')
        },
        {
          value: 3,
          label: this.$t('m.End_order_platform')
        },
        {
          value: 4,
          label: this.$t('m.Platform_discount') + ': '
        },
        {
          value: 5,
          label: this.$t('m.Platform_discount_FOC')
        },
        {
          value: 6,
          label: this.$t('m.Order_Result')
        },
        {
          value: 7,
          label: this.$t('m.Returned')
        },
        {
          value: 8,
          label: this.$t('m.Order_Status_Completed')
        },
        {
          value: 9,
          label: this.$t('m.Order_Refund')
        },
        {
          value: 10,
          label: this.$t('m.End_order_automatically')
        },
        {
          value: 11,
          label: this.$t('m.End_order_atively')
        },
        {
          value: 12,
          label: this.$t('m.Report_order_problem2')
        },
        {
          value: 13,
          label: this.$t('m.Report_order_problem1')
        },
        // {
        //   value: 14,
        //   label: '取消'
        // },
        {
          value: 15,
          label: this.$t('m.Order_Result')
        },
        {
          value: 16,
          label: this.$t('m.Order_Result')
        },
        {
          value: 17,
          label: this.$t('m.Order_End_order')
        }
      ],
      // 支付方式
      optionsPaymentMethod: [{ value: '', label: this.$t('m.all') }].concat(
        this.$dict.transfer.paymentMethod
      ),

      //交易类型
      transferOption: [
        {
          value: 1,
          label: this.$t('m.Payment_amount')
        },
        {
          value: 2,
          label: this.$t('m.Rental_refund')
        },
        // {
        //   value: 5,
        //   label: this.$t('m.Users_Deapoit')
        // },
        // {
        //   value: 6,
        //   label: this.$t('m.Deposit_refunded')
        // },        
        {
          value: 7,
          label: this.$t('m.Payment_amount')
        },
        {
          value: 8,
          label: this.$t('m.Rental_refund')
        },
      ],
      optionsTime: [
        { value: '1', label: this.$t('m.minute3') },
        { value: '2', label: this.$t('m.hours') }
      ],
      // 订单来源
      sourceOption: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: '1',
          label: 'APP'
        },
        {
          value: '2',
          label: 'H5'
        }
      ],
      details: {
        couponAmount: 0,
        promoCodeAmount: 0,
        useDuration: 0,
        billDuration: 0,
        shareDTO: {
          dividendAmount: 0,
          platformAmount: 0,
          agentAmount: 0,
          branchAmount: 0
        },
        transferList: []
      }, //订单详情
      record: '', //订单时间线
      detailAuth: this.permissionsId(9) //订单详情
    }
  },
  created () {
    if (!this.detailAuth) {
      return
    }
    this.getDetails()
  },
  mounted () {},
  methods: {
    //获取订单详情
    getDetails () {
      this.$api.order.orderDetail(this.$route.query.orderNo).then(res => {
        if (this.$ok(res)) {
          this.details = res.data
          this.details.billing = JSON.parse(this.details.billing)
          res.data.shareDTO == null
            ? (this.details.shareDTO = {
                dividendAmount: 0,
                platformAmount: 0,
                agentAmount: 0,
                branchAmount: 0
              })
            : ''
        }
      })
      this.$api.order.orderRecord(this.$route.query.orderNo).then(res => {
        if (this.$ok(res)) {
          this.record = res.data
        }
      })
    }
  }
}
</script>
